<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">营销</a></el-breadcrumb-item>
    <el-breadcrumb-item>品牌推荐</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-icon><Search /></el-icon> <span> 筛选搜索</span>
        <el-button class="btn1" @click="reset">重置</el-button>
        <el-button type="primary" @click="search">查询搜索</el-button>
      </div>
    </template>
    <div class="double">
      <div>
        <span>品牌名称:</span>
        <el-input v-model="input" placeholder="品牌名称" class="down" />
      </div>

      <div class="choose">
        <span>推荐状态：</span>
        <el-select v-model="value" class="m-2" placeholder="胡荒帝">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </el-card>

  <!-- 
  //中间过渡的 -->
  <el-card class="box-card">
    <div class="datalist">
      <div>数据列表</div>

      <!-- a按钮 -->
      <el-button text @click="change" type="primary">
        选择品牌
      </el-button>
    </div>
    <el-dialog v-model="dialogTableVisible" title="选择品牌">
      <div class="mt-4">
        <el-input v-model="input2" placeholder="品牌名称搜索">
          <template #append>搜索</template>
        </el-input>
      </div>
      <el-table :data="list2" >
        <el-table-column type="selection" width="200"/>

        <el-table-column property="subTitle" label="品牌名称" width="150" />
        <el-table-column  label="货号" width="200" >NO.</el-table-column>
        <el-table-column property="brandName" label="价格" width="200" >￥0</el-table-column>

        
      </el-table>
      <el-pagination class="into" background layout="prev, pager, next" :total="1000" />
    </el-dialog>
  </el-card>

  <div class="middle">
    <el-table :data="list" style="width: 100%" :border="true">
      <el-table-column type="selection" width="65" />
        <el-table-column prop="id" label="编号" width="140" />
        <el-table-column prop="productName" label="品牌名称" width="200" />
        <el-table-column  label="是否推荐" width="220" >
          <template #default="scope">
        <el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" />
       </template>
          
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="220" />
        <el-table-column  label="状态" width="200" >
        <template #default="scope">
        <div >{{scope.row.recommendStatus === 1 ? '推荐' : '不推荐'}}</div>
      </template>
      </el-table-column>
        <el-table-column label="操作" width="200" flex="right">
        <template #default="scope">
          <el-button @click="sort">设置排序</el-button>

       
          <el-dialog v-model="dialogFormVisible" title="设置排序" >
    <el-form :model="form2">
      <el-form-item label="排序" :label-width="formLabelWidth" aria-placeholder="5">
        <el-input v-model="form.name" autocomplete="off"  model-value="5"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
        确定
        </el-button>
      </span>
    </template>
  </el-dialog>

          <el-button @click="del">删除</el-button>
        </template>
      </el-table-column>
        <!-- 自定义列模板 -->
     </el-table>
  </div>
  <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->

  <!-- 选择栏和按钮 -->

  <!--   //分页器 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 20, 30]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import * as api from "../../json/request/api";
import type { INewProductList,IProductList } from "../../json/request/QmsAdminConreiller/index";


import { ref,reactive,toRefs,onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
const pageNum = ref(1)
const input = ref('')
const value = ref("");
const value1 = ref(true);
// let name = ref("")
let list2 = ref([])
const options = [
{
  value: 0 && 1,
  label: '全部',
},
{
  value: 0,
  label: '未推荐',
},
{
  value: 1,
  label: '推荐中',
},

]

//查询搜索
let search = async () => {
   let res = await api.admin.newProduct({
 pageNum:1,
 pageSize:5,
 productName:input.value,
 recommendStatus:value.value

   })
  list.value = res.list
}
//分页

const currentPage4 = ref(4);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
let total = ref(0)
let list = ref([]);

const handleSizeChange = async (val: number) => {
  let res = await api.admin.newProduct({
   
    
 pageNum:1,
 pageSize:val,
 productName:"",
 recommendStatus:""

  })
  console.log(res);
  console.log(val);
  

  getNewProductList.list = res.list
  list.value = res.list
  total.value =  Number(res.total)
};
const handleCurrentChange = async (val: number) => {
  let res = await api.admin.newProduct({
 pageNum:val,
 pageSize:5,
 productName:"",
 recommendStatus:""

  })
  console.log(res);
  getNewProductList.list = res.list
  list.value = res.list
  total.value =  Number(res.total)
};

//数据列表的弹出框
let dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
let getNewProductList = reactive({
  list: [],
});
onMounted(async() => {
  let res = await api.admin.newProduct({
 pageNum:1,
 pageSize:5,
 productName:"",
 recommendStatus:""

  })
  console.log(res);
  getNewProductList.list = res.list
  list.value = res.list
  total.value =  Number(res.total)
})
//打开选择商品的对话框
let change = async ()=>{
  dialogTableVisible.value = true
  let res = await api.admin.productList({
    code: 0,
    data: {
      list: [],
      pageNum: 0,
      pageSize: 0,
      total: 0,
      totalPage: 0
    },
    message: ""
  })
  console.log(res);
  list2.value = res.list
  
}

//设置排序
let sort = () => {
  console.log('789');
  
  dialogFormVisible.value = true;
}

//删除功能
//删除功能
const del = () => {
  ElMessageBox.confirm(
    '确定要删除该推荐?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
    
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
        //删除的请求
        let res = await api.admin.homenewproductdelete({
        code: 0,
        data: {},
        message: '',
       ids:89
        
        })
      console.log(res);
        
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

let reset = () => {
  alert("系统已重置！！")
}


</script>

<style scoped>
.datalist {
  display: flex;
  justify-content: space-between;
}
.double {
  display: flex;
  justify-content: space-between;
}
.btn1 {
  margin-left: 940px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 1240px;
  margin-top: 20px;
}
.down {
  width: 200px;
  margin-left: 20px;
}

.m-2 {
  margin-left: 6px;
}
.brand {
  margin-left: 1000px;
}
.demo-pagination-block {
  margin-left: 700px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 30px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.into{
  margin-left: 390px;
}
</style>
